<template>
  <div class="row" style="align-items: center">
    <template v-if="!free">
      <div v-if="coins > 0" class="row">
        <img
            src="@/views/activityPages/assets/ze-points.png"
            style="width: 16px; height: 16px"
        />
        <text class="moneyText" style="font-size: 16px"
        >{{ coins }}
          <text class="moneyText" style="font-size: 10px">积分</text>
        </text>
      </div>
      <img
          v-if="coins > 0 && price > 0"
          src="@/views/activityPages/assets/add5464.png"
          style="width: 12px; height: 12px"
      />
      <div
          v-if="price >= 0"
          class="moneyText"
          style="font-size: 16px; font-weight: bold;display: flex;flex-direction: row;align-items: end"
      >
        <div style="font-size: 12px">
          ￥
        </div>
        <div>
          {{ price }}
        </div>
      </div
      >
    </template>

    <text v-if="free" class="moneyTextFree">免费</text>
  </div>
</template>

<script setup lang="ts">
import {ref, defineProps} from 'vue';
// import { onLaunch, onShow, onHide, onLoad } from '@dcloudio/uni-app'

// import { useStore } from 'vuex'

const props = defineProps({
  coins: Number, price: Number, free: {
    type: Boolean,
    default: false
  }
});
</script>

<style lang="scss" scoped>
.input {
  border: none;
}

.button {
  width: 116px;
  height: 35px;
  line-height: 20px;
  border-radius: 20px;
  background-color: rgba(236, 106, 45, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inputTitle {
  width: 70px;
  text-align: end;
}

.card {
  line-height: 20px;
  border-radius: 10px;
  background-color: white;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: Roboto;
  padding: 10px;
  align-items: flex-start;

  display: flex;
  flex-direction: column;
}

.titleText {
  line-height: 17px;
  color: rgba(16, 16, 16, 1);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
  font-weight: bold;
}

.subText {
  color: rgba(153, 153, 153, 1);
  font-size: 10px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.row {
  display: flex;
  flex-direction: row;
}

.moneyText {
  color: #ed671c;
  font-size: 20px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.moneyTextFree {
  color: #328c00;
  font-size: 16px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.divider {
  width: 999px;
  height: 2px;
  background-color: #f5f5f5;
  // border: 1px solid rgba(245, 245, 245, 1);
}

.bottom {
  position: fixed;
  bottom: calc(var(--window-bottom));
  z-index: 1030;
  margin-bottom: 0px;
  width: 100%;
}
</style>
